import React from 'react';
import { connect } from 'dva';
import hexSha1 from 'sha1';
import { routerRedux } from 'dva/router';
import { Form, Icon, Input, Button, Checkbox, Row, Col, message } from 'antd';
import styles from './UserLogin.css';

const FormItem = Form.Item;

class NormalLoginForm extends React.Component {
  state = {
    captcha: '',
  }
  componentDidMount() {
    this.getCaptcha();
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.login.result.code === 0) {
      message.success('登录成功，马上跳转！', 0.8);
      setTimeout(() => (this.props.dispatch(routerRedux.push('basicLayout/commodity'))), 1000);
    }
  }

  getCaptcha = () => {
    let num = '';
    for (let i = 0; i < 6; i += 1) {
      num += Math.floor(Math.random() * 10);
    }
    this.setState({
      captcha: num,
    });
    // this.props.dispatch({
    //   type: 'login/getCaptcha',
    // });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (values.captcha !== this.state.captcha) {
          alert('验证码错误！');
        } else {
          const parms = {
            user_name: values.userName,
            password: hexSha1(values.password),
          };
          console.log(parms);
          this.props.dispatch({
            type: 'login/userLogin',
            payload: {
              ...parms,
            },
          });
        }
      }
    });
  }

  turnToRegist = () => {
    this.props.dispatch(routerRedux.push('register'));
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Row type="flex" justify="center" className={styles.layout}>
        <Col span={8} />
        <Col span={8} pull={4}>
          <Form onSubmit={this.handleSubmit} className={styles.loginForm}>
            <FormItem>
              {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
          )}
            </FormItem>
            <FormItem>
              <Row gutter={8}>
                <Col span={12}>
                  {getFieldDecorator('captcha', {
                rules: [{ required: true, message: '请输入验证码!' }],
              })(
                <Input />
              )}
                </Col>
                <Col span={12}>
                  <Button onClick={this.getCaptcha}>{this.state.captcha}</Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem>
              <Row>
                <Row>
                  <Col span={24}>
                    {getFieldDecorator('remember', {
                            valuePropName: 'checked',
                        initialValue: true,
                        })(
                          <Checkbox>记住我</Checkbox>
                        )}
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <Button type="primary" htmlType="submit" className={styles.loginButton}>
                        Login
                    </Button>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={2}>Or</Col>
                  <Col span={22}>
                    <span
                      className={styles.regiterModel}
                      onClick={this.turnToRegist}
                    >
                         register now!
                    </span>
                  </Col>
                </Row>
              </Row>
            </FormItem>
          </Form>
        </Col>
        <Col span={8} />
      </Row>
    );
  }
}

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);

export default connect(({ login }) => ({
  login,
}))(WrappedNormalLoginForm);
